<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>tabs</title>
	<link rel="stylesheet" href="/strophe/public/css/jquery-ui-1.8.21.custom.css">
	<script type="text/javascript" src="/strophe/public/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/strophe/public/js/jquery-ui-1.8.21.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#tab-example').tabs();
			
			// add tabs
			$('#tab-example').tabs('add', '#tab-example-3', 'Third Tab');
			$('#tab-example-3').html("<p>Finally, a third tab!</p>");
			
			// switch to the second tab
			$('#tab-example').tabs('select', '#tab-example-2');
			
			var tab = '#tab-example';
			$(tab).tabs('select', '#tab-example-1');
		});
	</script>
</head>
<body>
	<div id="tab-example">
		<ul>
			<li><a href="#tab-example-1">First Tab</a></li>
			<li><a href="#tab-example-2">Second Tab</a></li>
		</ul>
		
		<div id="tab-example-1">
			<p>This is the first tab. Neat!</p>
		</div>
		
		<div id="tab-example-2">
			<p>And here is the second tab.</p>
		</div>
	</div>
</body>
</html>